<template>
  <div>
    <el-dialog
      title="提示"
      :visible="show"
      width="480px"
      :append-to-body="true"
      @close="close"
    >
      <div
        class="mainContent"
        style="height:200px;"
      >
        <div
          v-if="protect"
          class="title rowFlex rowCenter"
        >
          <div v-if="rowInfo.title && (templateType!='multiple' || !templateType)">
            <i class="el-icon-warning icon"></i>
            《{{ rowInfo.title }}》已开启新剧保护
          </div>
          <div v-else>
            <i class="el-icon-warning icon"></i> 不符合新剧保护
          </div>

        </div>
        <div
          v-else
          class="title rowFlex rowCenter"
        >
          <i class="el-icon-warning icon"></i> 创建失败！
        </div>
        <div class="textContent columnFlex allCenter">
          <p
            v-for="(item,index) in msgList"
            :key="index"
            style="color:#F56C6C;"
          >{{ item }} </p>
        </div>
      </div>
      <span
        v-if="protect"
        class="dialog-footer rowFlex"
      >
        <el-button
          class="btn"
          style="width:auto;"
          @click="watchRule"
        >查看新剧定价规则</el-button>
        <el-button
          class="btn"
          type="primary"
          @click="close"
        >重新选择</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新剧定价规则"
      :visible="showRule"
      width="420px"
      :append-to-body="true"
      @close="showRule = false"
    >
      <div class="mainContent">
        <p>1. 单集定价 {{ paymentListInfo.single }}~{{ paymentListInfo.single_max }} 虚拟币/集</p>
        <p>2. 每档喵币充值赠币 ≤ {{ paymentListInfo.coin_height }}%</p>
        <!-- <p>2. 充值挽留折扣最高 ≤ {{ paymentListInfo.discount }}</p> -->
        <p>3. 会员付费设置：</p>
        <div class="vipContent">
          会员包年 ≥ {{ paymentListInfo.vip_year }}元，会员包半年 ≥ {{ paymentListInfo.vip_half_year }}元，会员包季 ≥ {{ paymentListInfo.vip_season }}元，会员包月 ≥ {{ paymentListInfo.vip_month }}元，会员包15天 ≥ {{ paymentListInfo.vip_half_month }}元，会员包7天 ≥ {{ paymentListInfo.vip_week }}元，会员包3天 ≥ {{ paymentListInfo.vip_three_day }}元，会员包1天 ≥ {{ paymentListInfo.vip_day }}元，解锁本（单）剧全剧最低 ≥ {{ paymentListInfo.single_playlet }}元，充值挽留折扣最低 {{ paymentListInfo.discount }}折，单集解锁每集最低{{ paymentListInfo.single_chapter }}元-最高{{ paymentListInfo.single_chapter_max }}元
        </div>
      </div>
      <span class="dialog-footer rowFlex">
        <el-button
          class="btn"
          type="primary"
          @click="showRule = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
import { paymentList } from '@/api/payment'
export default {
  props: ['show', 'msg', 'rowInfo', 'templateType'],
  data() {
    return {
      paymentListInfo: {},
      showRule: false,
      msgList: [],
      protect: true
    }
  },
  watch: {
    show(newVal, oldVal) {
      if (newVal) {
        console.log('显示弹窗')
      }
    }
  },
  mounted() {
    this.paymentList()
    this.msgList = this.msg.replace('操作失败!', '').split(';')
    if (this.msg.indexOf('创建失败') !== -1) {
      this.protect = false
    }
  },
  methods: {
    paymentList() {
      paymentList({ type: 2 }).then((res) => {
        if (res.data.data && res.data.data.limit_config) {
          this.paymentListInfo = res.data.data.limit_config
        }
      })
    },
    watchRule() {
      this.showRule = true
      // this.close()
    },
    close() {
      this.$emit('update:show', false)
    },
    submit() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer {
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}
.mainContent {
  height: 280px;
  p {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1d2129;
    line-height: 24px;
  }
  .title {
    .icon {
      font-size: 22px;
      color: #ff7d00;
    }
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #1d2129;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  .vipContent {
    width: 100%;
    height: auto;
    background: #f2f3f5;
    border-radius: 4px;
    padding: 15px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1d2129;
    line-height: 24px;
    margin-top: 15px;
  }
}
.dialog-footer {
  width: 100%;
  height: auto;
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  justify-content: flex-end;
  background: #fff;
  .btn {
    min-width: 84px;
    height: 32px;
  }
}
</style>
